import { useEffect } from "react";
import bg from "@/assets/images/cover.png";

export default function RandomBackground() {
  useEffect(() => {
    // [[x_start, x_end], [y_start, y_end]]
    const positions: [number, number][][] = [
      // prettier-ignore
      [[-20, 35], [-20, 35]],
      // prettier-ignore
      [[65, 120], [-20, 35]],
      // prettier-ignore
      [[-20, 35], [65, 120]],
      // prettier-ignore
      [[65, 120], [65, 120]],
    ];
    // 将屏幕分为四分，每一份一张背景图，位置在各自区域随机
    document.body.style.backgroundImage = `url(${bg}),url(${bg}),url(${bg}),url(${bg})`;
    document.body.style.backgroundRepeat = "no-repeat";
    document.body.style.backgroundAttachment = "fixed";
    let p: string[] = [];
    positions.forEach((position) => {
      p.push(
        `${getRandomValueBetween(...position[0])}% ${getRandomValueBetween(...position[1])}%`,
      );
    });
    document.body.style.backgroundPosition = p.join(",");
  }, []);
  return null;
}

function getRandomValueBetween(start: number, end: number) {
  const r = Math.random();
  return start + r * (end - start);
}
